@import "../../assets/variables.sass"

$taginput-margin-top-bottom: .5rem
$taginput-margin-left-right: .75rem
$tag-margin-right: .4rem
$tag-margin-bottom: .2rem
$label-padding: .2rem .5rem
$remove-padding: .2rem .4rem
$input-padding: .2rem 0

.TagsInput
  margin-bottom: 10px
  padding: $taginput-margin-top-bottom $taginput-margin-left-right
  padding-bottom: $taginput-margin-top-bottom - $tag-margin-bottom
  border: 1px solid #ccc
  border-radius: .4rem
  .placeholder
    color: #ccc
  .tag
    float: left
    margin-right: $tag-margin-right
    margin-bottom: $tag-margin-bottom
    border-radius: .4rem
    background-color: #eee
    &:hover
      background-color: #ddd
    .label
      float: left
      padding: $label-padding
      border-radius: .4rem 0 0 .4rem
    .remove
      float: left
      padding: $remove-padding
      border-left: 1px solid white
      border-radius: 0 .4rem .4rem 0
      color: #999
      cursor: pointer
      &:hover
        background-color: $brand
        color: white
  .dropdown
    float: left
    position: relative
    .dropdown-input
      margin-bottom: $tag-margin-bottom
      padding: $input-padding
      width: 6rem
      height: 1.3rem
      border: none
      outline: none
    .dropdown-menu
      position: absolute
      left: 0
      top: 1.3rem
      display: block

      
